<template>
  <div class="playMusic">
    <div
      class="bg"
      :style="{backgroundImage:`url(${playDetail.al.picUrl})`}"
    ></div>
    <div class="playTop">
      <div
        class="back"
        @click="$emit('back')"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-zuojiantou-copy"></use>
        </svg>
      </div>
      <div class="center">
        <div class="title">
          <marquee
            behavior="scroll"
            direction="left"
          >
            {{playDetail.al.name}}
          </marquee>
        </div>
        <div class="author"></div>
      </div>
      <div class="share">
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-fenxiang"></use>
        </svg>
      </div>
    </div>
    <div
      class="playContent"
      v-show="!isLyric"
    >
      <img
        class="needle"
        :class="{active:!paused}"
        src="@/assets/img/needle-ab.png"
        alt=""
      >
      <img
        class="disc"
        src="@/assets/img/disc_ip6.png"
        alt=""
      >
      <img
        class="playImg"
        :src="playDetail.al.picUrl"
        alt=""
      >
    </div>
    <div
      class="playLyric"
      v-show="isLyric"
      ref="playLyric"
    >
      <p
        v-for="(item,i) in lyricList"
        :key="i"
        :class="{active:(currentTime*1000>item.pre&&currentTime*1000 <=item.time)}"
      >
        {{item.lyric}}
      </p>
    </div>
    <div class="progress"></div>
    <div class="playFooter">
      <svg
        class="icon"
        aria-hidden="true"
      >
        <use xlink:href="#icon-xunhuan"></use>
      </svg>
      <svg
        class="icon"
        aria-hidden="true"
        @click="goPlay(-1)"
      >
        <use xlink:href="#icon-shangyishou1"></use>
      </svg>
      <svg
        class="icon play"
        aria-hidden="true"
        v-if="paused == true"
        @click="play"
      >
        <use xlink:href="#icon-bofang2"></use>
      </svg>
      <svg
        class="icon play"
        aria-hidden="true"
        @click="play"
        v-else
      >
        <use xlink:href="#icon-zantingtingzhi2"></use>
      </svg>
      <svg
        class="icon"
        aria-hidden="true"
        @click="goPlay(1)"
      >
        <use xlink:href="#icon-xiayishou"></use>
      </svg>
      <svg
        class="icon"
        aria-hidden="true"
      >
        <use xlink:href="#icon-bofangliebiao"></use>
      </svg>
    </div>
  </div>
</template>

<script>
  import {mapState,mapGetters} from 'vuex';
  export default {
    props:['playDetail','paused','play'],
    computed: {
      ...mapState(['lyric','currentTime','playlist','playCurrentIndex']),
      ...mapGetters(['lyricList'])
    },
    created() {
      console.log(this.lyricList);
    },
    data() {
      return {
        isLyric:true,
      }
    },
    watch:{
      currentTime(newValue){
        let p = document.querySelector('p.active');
        if(p){
          this.$refs.playLyric.scrollTop = p.offsetTop;
        }
      }
    },
    methods: {
      goPlay(num) {
        console.log(num);
        console.log(this.playlist);
        console.log(this.playCurrentIndex);
        let index = this.playCurrentIndex+num;
        if(index<0){
          index = this.playlist.length - 1;
        }else if(index == this.playlist.length){
          index = 0;
        }
        this.$refs.playLyric.scrollTop = 0;
        this.$store.commit('setPlayIndex',index);
      }
    },
  }
</script>

<style lang="less" scoped>
.playMusic {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: 1000000;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-size: auto 100%;
    background-position: center;
    filter: blur(60px);
  }
  .playTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 7.5rem;
    height: 1.2rem;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    padding: 0 0.4rem;
    .icon {
      fill: #fff;
      width: 0.4rem;
      height: 0.4rem;
    }
    .center {
      .title {
        marquee {
          flex: 1;
          width: 5rem;
        }
      }
    }
  }
  .playContent {
    position: absolute;
    width: 7.5rem;
    height: 7.5rem;
    left: 0;
    top: 1.5rem;
    .needle {
      width: 2.5rem;
      height: auto;
      position: absolute;
      left: 3.5rem;
      transform-origin: 0.3rem 0;
      z-index: 10;
      transition: all 1s;
      transform: rotate(-10deg);
      &.active {
        transform: rotate(5deg);
      }
    }
    .disc {
      width: 5.5rem;
      height: auto;
      position: absolute;
      left: calc(50% - 2.75rem);
      top: 2.5rem;
    }
    .playImg {
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 1.75rem;
      position: absolute;
      left: calc(50% - 1.75rem);
      top: 3.5rem;
    }
  }
  .playLyric {
    position: absolute;
    width: 7.5rem;
    height: 8rem;
    left: 0;
    top: calc(50% - 4rem);
    text-align: center;
    overflow: scroll;
    color: #fff;
    padding: 0.2rem 0;
    .active {
      color: red;
    }
  }
  .playFooter {
    width: 7.5rem;
    height: 1.5rem;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.4rem;
    .icon {
      fill: #fff;
      width: 0.4rem;
      height: 0.4rem;
      &.play {
        width: 1rem;
        height: 1rem;
      }
    }
  }
}
</style>